<template>
  <el-card>
    <el-button
      type="primary"
      plain
      @click="addDialogVisible = true"
      size="small"
      style="margin-bottom:10px"
      ><el-icon><Plus /></el-icon>添加</el-button
    >
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="80">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template></el-table-column
      >
      <el-table-column prop="name" label="名称" />
      <el-table-column label="更改状态">
        <template #default="{ row }">
          <el-switch
            v-model="row.disabled"
            :active-value="false"
            :inactive-value="true"
            active-text="启用"
            inactive-text="禁用"
            @change="changeStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            size="small"
            type="danger"
            plain
            link
            @click="onDelete(row)"
            ><el-icon><DeleteFilled /></el-icon>删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog
    v-model="addDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="添加"
    width="500"
    @close="closeDialog(ruleFormRef)"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 800px"
      :model="ruleForm"
      :rules="rules"
      label-width="80"
      status-icon
      @submit.prevent
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入标题"
          clearable
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="是否禁用" prop="disabled">
        <el-switch
          v-model="ruleForm.disabled"
          :active-value="false"
          :inactive-value="true"
          active-text="启用"
          inactive-text="禁用"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetDialog(ruleFormRef)">重 置</el-button>
        <el-button type="primary" @click="submitAdd(ruleFormRef)">
          提 交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import {
  getTypeList,
  addType,
  editType,
  delType
} from '@/api/content/contentList'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref([])
const addDialogVisible = ref(false)
const ruleFormRef = ref()
const ruleForm = ref({
  name: '',
  disabled: false
})
// 校验规则
const rules = reactive({
  name: [{ required: true, message: '请添加名称', trigger: 'change' }]
})

onMounted(() => {
  getTypeListData()
})
const getTypeListData = async () => {
  await getTypeList()
    .then((res) => {
      tableData.value = res.data
    })
    .catch((err) => {
      console.log(err)
    })
}

// 添加
const submitAdd = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const convertedValue = ruleForm.value.disabled ? 1 : 0
      await addType({
        name: ruleForm.value.name,
        disabled: convertedValue
      })
        .then((res) => {
          ElMessage({
            type: 'success',
            message: res.message
          })
          addDialogVisible.value = false
          getTypeListData()
          ruleForm.value = { name: '', disabled: false }
        })
        .catch((err) => {
          addDialogVisible.value = false
          console.log(err)
        })
    }
  })
}
// 重置
const resetDialog = (formEl) => {
  formEl.resetFields()
  ruleForm.value = { name: '', disabled: false }
}

// 关闭
const closeDialog = (formEl) => {
  addDialogVisible.value = false
  resetDialog(formEl)
}

// 更改状态
const changeStatus = (row) => {
  ElMessageBox.confirm('您确定更改禁用状态吗？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const convertedValue = row.disabled ? 1 : 0
      await editType({ id: row.id, disabled: convertedValue })
        .then((res) => {
          ElMessage({
            type: 'success',
            message: res.message
          })
          getTypeListData()
        })
        .catch((err) => {
          console.log(err)
        })
    })
    .catch(() => {
      row.disabled = !row.disabled
      ElMessage({
        type: 'info',
        message: '已取消更改'
      })
    })
}
// 删除
const onDelete = (row) => {
  ElMessageBox.confirm('您确定要删除这条数据吗？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await delType(row.id)
        .then((res) => {
          ElMessage({
            type: 'success',
            message: res.message
          })
          getTypeListData()
        })
        .catch((err) => {
          console.log(err)
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
</script>

<style lang="scss" scoped>
:deep(.el-table .el-table__header-wrapper th) {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px !important;
  font-size: 13px;
}
:deep(.el-form-item__label) {
  font-weight: bold !important;
}
</style>
